<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>湄职院成绩单</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="container">
      <ul>
        <li class="biaoti">
          <p>湄洲湾职业技术学院</p>
          <p>计算机应用技术</p>
          <p>各学年考试成绩</p>
        </li>

        <li><img src="./img/大一上.png" alt="" class="image-thumbnail" /></li>
        <li><img src="./img/大一下.png" alt="" class="image-thumbnail" /></li>
        <li><img src="./img/大二上.png" alt="" class="image-thumbnail" /></li>
        <li><img src="./img/大二下.png" alt="" class="image-thumbnail" /></li>
        <li><img src="./img/大三上.png" alt="" class="image-thumbnail" /></li>
      </ul>

      <!-- 模态框容器 -->
      <div id="modal" class="modal hidden">
        <div class="modal-content">
          <img id="modal-image" src="" alt="Selected Image" />
          <!-- 可选：添加关闭按钮或其他模态框控件 -->
          <button id="close-modal">&times;</button>
        </div>
      </div>
    </div>
    <script>
      // 获取相关DOM元素
      const modal = document.getElementById("modal");
      const closeButton = modal.querySelector(".close");
      const modalImage = document.getElementById("modal-image");
      const triggerImage = document.querySelectorAll(".image-thumbnail");

      triggerImage.forEach(function (link) {
        link.addEventListener("click", function (event) {
          // 获取被点击图片的源
          const clickedImageSrc = event.target.src;
          // 更新模态框中的图片源
          modalImage.src = clickedImageSrc;

          modal.style.display = "block";
        });
      });

      // 添加点击事件监听器
      // triggerImage.addEventListener("click", function () {
      //   modal.style.display = "block";
      //   const smallImageUrl = this.src; // 获取触发图片的src
      //   modalImage.src = smallImageUrl;
      // });

      const closeModalButton = document.getElementById("close-modal");
      closeModalButton.addEventListener("click", function () {
        modal.style.display = "none";
      });

      // 可选：点击模态框外部区域时隐藏模态框
      modal.addEventListener("click", function (event) {
        if (event.target === modal) {
          modal.style.display = "none";
        }
      });

      // const closeModalButton = document.getElementById("close-modal");

      // closeModalButton.addEventListener("click", () => {
      //   modal.classList.add("hidden"); // 隐藏模态框
      // });
    </script>
  </body>
</html>
